<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-tab-bar {
            height: 83px; /* 包含安全区域的高度 */
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            padding-bottom: 30px; /* 安全区域 */
            z-index: 50;
        }
        
        .ios-tab-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        .tab-label {
            font-size: 10px;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 127px); /* 状态栏 + 底部导航的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .notice-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .notice-item.dark {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .notice-dot {
            width: 10px;
            height: 10px;
            border-radius: 5px;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .tab-indicator {
            position: absolute;
            bottom: 0;
            height: 3px;
            background-color: #0ea5e9;
            border-radius: 3px;
            transition: all 0.3s ease;
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-tab-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .notice-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 顶部导航栏 -->
            <div class="bg-white dark:bg-gray-800 px-4 py-3 shadow-sm relative">
                <div class="text-center text-lg font-semibold text-gray-800 dark:text-gray-200">公告通知</div>
            </div>
            
            <!-- 分类标签 -->
            <div class="bg-white dark:bg-gray-800 px-4 py-2 border-b border-gray-100 dark:border-gray-700 relative">
                <div class="flex space-x-6">
                    <div class="py-2 px-1 text-blue-500 dark:text-blue-400 font-medium relative">
                        园区公告
                        <div class="tab-indicator w-full"></div>
                    </div>
                    <div class="py-2 px-1 text-gray-500 dark:text-gray-400">
                        活动资讯
                    </div>
                    <div class="py-2 px-1 text-gray-500 dark:text-gray-400">
                        政策法规
                    </div>
                </div>
            </div>
            
            <!-- 公告列表 -->
            <div class="px-4 py-2">
                <!-- 置顶公告 -->
                <div class="glass-card p-4 mb-4">
                    <div class="flex items-start">
                        <div class="bg-red-100 dark:bg-red-900/30 p-2 rounded-lg mr-3">
                            <i class="fas fa-bullhorn text-red-500 dark:text-red-400"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center mb-1">
                                <span class="px-2 py-0.5 bg-red-100 dark:bg-red-900/30 text-red-500 dark:text-red-400 text-xs rounded-full mr-2">置顶</span>
                                <span class="text-sm font-medium text-gray-800 dark:text-gray-200">关于园区停车场管理系统升级的通知</span>
                            </div>
                            <div class="text-xs text-gray-500 dark:text-gray-400 mb-2 line-clamp-2">
                                为提升园区停车体验，我们将于7月1日至7月3日对停车场管理系统进行升级，期间可能会影响部分区域的车辆出入...
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-xs text-gray-400 dark:text-gray-500">2023-06-28</span>
                                <span class="text-xs text-gray-400 dark:text-gray-500">园区管理处</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 普通公告列表 -->
                <div class="glass-card overflow-hidden">
                    <!-- 公告项 -->
                    <div class="notice-item p-4">
                        <div class="flex items-start">
                            <div class="notice-dot bg-red-500 mt-1.5"></div>
                            <div class="flex-1">
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200 mb-1">园区7月份物业费缴纳通知</div>
                                <div class="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">
                                    请各位业主于7月10日前完成7月份物业费缴纳，可通过APP、微信或前台缴费...
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-400 dark:text-gray-500">2023-06-25</span>
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-400 dark:text-gray-500 mr-3">园区物业</span>
                                        <span class="text-xs text-blue-500 dark:text-blue-400">查看详情</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="notice-item p-4">
                        <div class="flex items-start">
                            <div class="notice-dot bg-gray-400 mt-1.5"></div>
                            <div class="flex-1">
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200 mb-1">园区绿化养护工作通知</div>
                                <div class="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">
                                    为改善园区环境，我们将于6月25日至6月30日进行园区绿化养护工作，请各位业主配合...
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-400 dark:text-gray-500">2023-06-20</span>
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-400 dark:text-gray-500 mr-3">园区物业</span>
                                        <span class="text-xs text-blue-500 dark:text-blue-400">查看详情</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="notice-item p-4">
                        <div class="flex items-start">
                            <div class="notice-dot bg-gray-400 mt-1.5"></div>
                            <div class="flex-1">
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200 mb-1">园区安全隐患排查工作通知</div>
                                <div class="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">
                                    为确保园区安全，我们将于6月15日至6月18日进行安全隐患排查，请各位业主予以配合...
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-400 dark:text-gray-500">2023-06-12</span>
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-400 dark:text-gray-500 mr-3">园区安全部</span>
                                        <span class="text-xs text-blue-500 dark:text-blue-400">查看详情</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="notice-item p-4">
                        <div class="flex items-start">
                            <div class="notice-dot bg-gray-400 mt-1.5"></div>
                            <div class="flex-1">
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200 mb-1">园区电梯维保通知</div>
                                <div class="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">
                                    为确保电梯安全运行，我们将于6月10日对A栋、B栋电梯进行例行维保，期间电梯将暂停使用...
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-400 dark:text-gray-500">2023-06-05</span>
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-400 dark:text-gray-500 mr-3">园区物业</span>
                                        <span class="text-xs text-blue-500 dark:text-blue-400">查看详情</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="notice-item p-4">
                        <div class="flex items-start">
                            <div class="notice-dot bg-gray-400 mt-1.5"></div>
                            <div class="flex-1">
                                <div class="text-base font-medium text-gray-800 dark:text-gray-200 mb-1">园区消防演习通知</div>
                                <div class="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">
                                    为提高园区消防安全意识，我们将于6月1日上午10:00在园区广场举行消防演习，欢迎各位业主参加...
                                </div>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-gray-400 dark:text-gray-500">2023-05-28</span>
                                    <div class="flex items-center">
                                        <span class="text-xs text-gray-400 dark:text-gray-500 mr-3">园区安全部</span>
                                        <span class="text-xs text-blue-500 dark:text-blue-400">查看详情</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- iOS 底部导航栏 -->
        <div class="ios-tab-bar">
            <div class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-home tab-icon"></i>
                <span class="tab-label">首页</span>
            </div>
            <div class="tab-item text-blue-500 dark:text-blue-400">
                <i class="fas fa-bullhorn tab-icon"></i>
                <span class="tab-label">公告</span>
            </div>
            <div class="tab-item text-gray-500 dark:text-gray-400">
                <i class="fas fa-user tab-icon"></i>
                <span class="tab-label">我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .notice-item').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .notice-item').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-tab-bar, .glass-card, .notice-item').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 